<template>
  <div class="Login">
    <div class="login-content">
      <div class="left-logo"></div>
      <div class="right-login">
        <p class="title">{{title}}钱包后台系统</p>
        <p class="label">账号</p>
        <input class="login-msg" type="text" v-model="loginForm.username" @keyup.enter="login()">
        <p class="label">密码</p>
        <input
          class="login-msg"
          type="password"
          v-model="loginForm.password"
          @keyup.enter="login()"
        >
        <div style="text-align: center">
          <!-- <vueTencentCaptcha appid="2029098605" @callback="loginReq" ref="capt"></vueTencentCaptcha> -->
          <el-button class="submit" @click="login()" :disabled="isLoging">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Login } from "./common.service";

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
      },
      isLoging: false
    };
  },
  computed: {
    title() {
      return process.env.VUE_APP_TITLE || "";
    }
  },
  watch: {
    "$route.query.error": {
      handler(val) {
        if (val === "login") this.$notify.warning("登录失效，请重新登录！");
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    async login() {
      this.isLoging = true;
      const res = await Login(this.loginForm);
      if (res && res.code === 0) {
        this.$store.commit("updateToken", res.data.access_token);
        if (process.env.VUE_APP_TRS_CENTER === "1")
          this.$router.push("/container/category");
        else if (process.env.VUE_APP_ICO == "coc_")
          this.$router.push("/container/manageToken");
        else this.$router.push("/container");
      }
      this.isLoging = false;
    }
  }
};
</script>


<style scoped lang="scss">
.Login {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: #5666e7;

  .login-content {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -260px;
    margin-left: -525px;
    width: 1050px;
    height: 520px;
    border-radius: 8px;

    .left-logo {
      display: inline-block;
      overflow: hidden;
      width: 65%;
      height: 100%;
      background: #2e3bb5;
      background-image: url("../assets/img/businessLogin.png");
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px 0px 0px 8px;
    }

    .right-login {
      display: inline-block;
      overflow: hidden;
      padding: 0px 28px;
      width: 35%;
      height: 100%;
      background: #fff;
      border-radius: 0px 8px 8px 0px;

      .title {
        margin-top: 95px;
        margin-bottom: 61px;
        color: #313080 !important;
        font-size: 30px;
        font-weight: bold;
      }

      .label {
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
      }

      input.login-msg {
        margin-bottom: 32px;
        width: 100%;
        height: 46px;
        font-size: 18px;
        color: #313080;
        border: none;
        border-bottom: 1px solid #cccccc;
      }

      .submit {
        width: 154px;
        height: 47px;
        margin-top: 25px;
        background: rgba(89, 110, 225, 1);
        box-shadow: 0px 6px 16px 0px rgba(89, 110, 225, 0.38);
        border-radius: 24px;
        padding: 0px;
        font-size: 18px;
        color: #fff;
      }
    }
  }

  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
}
</style>
